import React, { FC, useState, useEffect, ChangeEvent } from 'react'
import { Tabs } from 'antd'
import { FileTextOutlined, SettingOutlined } from '@ant-design/icons'
import ComponentProp from '../ComponentProp/ComponentProp'
import PageSetting from '../PageSetting/PageSetting'
import useGetComponentInfo from '../../../../hooks/useGetComponentInfo'

// 枚举
enum TAB_KEYS {
    PROP_KEY = 'prop',
    SETTING_KEY = 'setting',
}

const RightPanel: FC = () => {
    const { selectedId } = useGetComponentInfo()
    const [activeKey, setActiveKey] = useState(TAB_KEYS.PROP_KEY)

    useEffect(() => {
        if (selectedId) {
            setActiveKey(TAB_KEYS.PROP_KEY)
        } else {
            setActiveKey(TAB_KEYS.SETTING_KEY)
        }
    }, [selectedId])

    // 手动切换右侧tab
    const handleOnChangeTabs = (key: string) => {
        setActiveKey(TAB_KEYS.SETTING_KEY)
    }
    const tabs = [
        {
            key: TAB_KEYS.PROP_KEY,
            label: (
                <span>
                    <FileTextOutlined />
                    属性
                </span>
            ),
            children: <ComponentProp />,
        },
        {
            key: TAB_KEYS.SETTING_KEY,
            label: (
                <span>
                    <SettingOutlined />
                    页面设置
                </span>
            ),
            children: <PageSetting />,
        },
    ]

    return (
        <div>
            <Tabs activeKey={activeKey} items={tabs} onChange={handleOnChangeTabs} />
        </div>
    )
}
export default RightPanel
